<template>
  <div class="photo-list">
    <van-tabs
      @click="getImages"
      v-if="imgCates.length!==0"
    >
      <van-tab
        v-for="item in imgCates"
        :key="item.id"
        :title="item.title"
      />
    </van-tabs>
    <!-- 图片区域 -->
    <ul
      class="img-list"
      v-if="imgs.length !== 0"
    >
      <li
        v-for="img in imgs"
        :key="img.id"
        @click="goDetail('/home/photoinfo/',img.id)"
      >
        <img
          v-lazy="img.img_url"
          alt=""
        >
      </li>
    </ul>
    <div v-else>
      暂无数据
    </div>
  </div>
</template>
<script>
// import mixins from '@/mixins'
export default {
  data: () => ({
    imgCates: [],
    imgs: []
  }),
  // mixins: [mixins],
  created() {
    console.log(1)
    this.getImgCategory()
    // 默认请求全部的数据
    this.getImages(0)
  },
  methods: {
    async getImgCategory() {
      const res = await this.$http.getImgCategory()
      res.message.unshift({
        id: 0,
        title: '全部'
      })
      this.imgCates = res.message
    },
    async getImages(id) {
      const res = await this.$http.getImages(id)
      this.imgs = res.message
    }
  }
}
</script>
<style lang="less" scoped>
.photo-list {
  .img-list {
    li {
      padding: 10px;
      padding-bottom: 0;
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }
}
</style>